<template>
  <div>
    <el-menu-item index="1" v-if="logInfo.id && logInfo.action" @click.native="showCustomerInfo">
      <el-badge is-dot class="nav-badge">
        <i class="el-icon-user"></i>
      </el-badge>
    
      <span slot="title">客户修改订单提醒</span>
    </el-menu-item>
    <orderLogDialog ref="orderLogDialog" title="客户修改信息" :reverseVisible="false">
      <div slot="head" class="fw-bold c-333">
        <el-alert
          :closable="false"
          title="标记已知道后不再提示，可刷新页面加载客户修改的信息。"
          type="info">
        </el-alert>
        <div class="ta-r">
          <el-button class="mt-10" size="small" @click="disposeCustomChange" type="primary">我已知道</el-button>
        </div>
      </div>
    </orderLogDialog>
  </div>
</template>

<script>
import {
  getCustomChange,
  disposeCustomChange,
} from "@/api/pending";
import orderLogDialog from '@/components/dialog/orderLogDialog'
export default {
  components: {
    orderLogDialog,
  },
  props: {
    orderId: {}
  },
  data() {
    return {
      logInfo: {}
    };
  },
  methods: {
    getCustomChange() {
      return getCustomChange({orderId: this.orderId}).then(res => {
        this.logInfo = res.data.data || {}
      })
    },
    showCustomerInfo() {
      this.$refs.orderLogDialog.showByLogList({logList: [this.logInfo]})
    },
    disposeCustomChange() {

      disposeCustomChange({
        id: this.logInfo.id
        // id: '2131'
      }).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '处理成功！',
          })
          this.logInfo = {}
          this.$refs.orderLogDialog.hide()
        } else {
          this.$message({
            type: 'error',
            message: '处理失败！',
          })
        }
      })
    },
    setTimer() {
      this.timer = setInterval(() => {
        this.getCustomChange().then(() => {
          if (this.logInfo.id && this.logInfo.action) {
            this.showCustomerInfo()
          }
        })
      }, 10 * 1000)
    },
    clearTimer() {
      this.timer && clearInterval(this.timer)
      this.timer = null
    }
  },
  mounted() {
    this.getCustomChange().then(() => {
      if (this.logInfo.id && this.logInfo.action) {
        this.showCustomerInfo()
      }
    })
    this.setTimer()
  },
  destoryed() {
    this.clearTimer()
  }
};
</script>
<style lang="scss" scoped>
.nav-badge {
  line-height: 24px;
}
</style>